<template>
  <div class="three-lr-main">
    <div class="three-header flex-row sp-between">
      <el-input
        class="w-286"
        placeholder="Detalis"
        v-model="inputDetalis">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <span @click="getScrollTop">get scroll top</span>
      <div class="flex-row header-note">
        <span class="">Note:</span>
        <i></i>
        <span class="">Certified Data Model</span>
      </div>
    </div>
    <div class="thlr-chain">
      <div class="chain-main flex-row">
        <div class="w-490 cm-left flex-row">
          <div class="w-244 cm-l-det flex-column al-center">
            <div class="cm-title mb-36">Detalis</div>
            <div class="h-auto flex-h-auto al-center leftDet" id="leftDet" ref="leftDet">
              <div class="d-style" 
                v-for="(v, i) in cusDetails" :key="i" 
                :ref="'leftDetIndex'+i">
                <h4>{{v.name}}</h4>
                <p class="det-info" v-for="(vv, ii) in v.children" :key="ii">{{vv}}</p>
                <div class="det-det" @click="getCusDetItem(v,i)">...</div>
                <div class="right-hor-line hor-line"></div>
              </div>
            </div>
            <div class="right-det-ver-line det-ver-line"></div>
          </div>
          <div class="w-270 cm-l-con c-lr-border flex-column al-center">
            <div class="cm-title mb-36">Content</div>
            <div class="c-style" 
              :class="[theCusItem==i ? 'border-active' : '']" 
              v-for="(v, i) in customer" :key="i"
              @click="getCusItem(i)">
              {{v.name}}
              <div class="left-circle circle" v-if="theCusItem==i"></div>
              <div class="the-left-hor-line" v-if="theCusItem==i"></div>
              <div class="right-hor-line hor-line"></div>
              <div class="right-ver-line ver-line"></div>
            </div>
          </div>
        </div>
        <div class="w-317 cm-center flex-row">
          <div class="cmc-item">
            <div class="cm-title mb-30">Customer</div>
            <div class="cmc-main">
              <img src="./img/owner.png" alt="Customer">
              <div class="left-circle circle"></div>
              <div class="left-hor-line hor-line"></div>
            </div>
          </div>
          <div class="cmc-item">
            <div class="cm-title mb-30">Account</div>
            <div class="cmc-main">
              <img src="./img/company.png" alt="Account">
              <div class="right-circle circle"></div>
              <div class="right-hor-line hor-line"></div>
            </div>
          </div>
        </div>
        <div class="w-490 cm-right flex-row">
          <div class="w-270 cm-r-con c-lr-border flex-column al-center">
            <div class="cm-title mb-36">Content</div>
            <div class="c-style" 
              :class="[theAccItem==i ? 'border-active' : '']"
              v-for="(v, i) in account" :key="i"
              @click="getAccItem(i)">
              {{v.name}}
              <div class="right-circle circle" v-if="theAccItem==i"></div>
              <div class="the-right-hor-line" v-if="theAccItem==i"></div>
              <div class="left-hor-line hor-line"></div>
              <div class="left-ver-line ver-line"></div>
            </div>
          </div>
          <div class="w-244 cm-r-det flex-column al-center">
            <div class="cm-title mb-36">Detalis</div>
            <div class="h-auto flex-h-auto al-center">
              <div class="d-style" v-for="(v, i) in accDetails" :key="i">
                <h4>{{v.name}}</h4>
                <p class="det-info" v-for="(vv, ii) in v.children" :key="ii">{{vv}}</p>
                <div class="det-det" @click="getAccDetItem(v,i)">...</div>
                <div class="left-hor-line hor-line"></div>
              </div>
            </div>
            <div class="left-det-ver-line det-ver-line"></div>
          </div>
        </div>
      </div>
      <div class="thlr-footer">
        <div class="flex-row ju-center footer-note">
          <span class="">Note:</span>
          <i></i>
          <span class="">Certified Data Model</span>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'vueName',
  data () {
    return {
      inputDetalis: '',
      // left
      theCusDetItem: 0,
      cusDetails: [
        {name: 'Download', children: ['Download_Date', 'Download_Desc']},
        {name: 'Create', children: ['Create_Date', 'Create_Desc']},
        {name: 'Login', children: ['Login_Date', 'Login_Desc']},
        {name: 'Posting', children: ['Posting_Date', 'Posting_Desc']},
        {name: 'Buy', children: ['Buy_Time', 'Buy_Order', 'Buy_Item and more']},
        {name: 'Login', children: ['Login_Date', 'Login_Desc']},
        {name: 'Posting', children: ['Posting_Date', 'Posting_Desc']},
        {name: 'Buy', children: ['Buy_Time', 'Buy_Order', 'Buy_Item and more']},
        {name: 'Login', children: ['Login_Date', 'Login_Desc']},
        {name: 'Posting', children: ['Posting_Date', 'Posting_Desc']},
        {name: 'Buy', children: ['Buy_Time', 'Buy_Order', 'Buy_Item and more']},
      ],
      theCusItem: 0,
      customer: [
        {id:'la', name:'Personal information'},
        {id:'lb', name:'Company information'},
        {id:'lc', name:'Personal behavior'},
        {id:'ld', name:'Trait'},
      ], 
      // right
      theAccItem: 0,
      account: [
        {id:'r', name:'Account Information'},
        {id:'r', name:'Marketing'},
        {id:'r', name:'Sales'},
        {id:'r', name:'Supply Chain'},
        {id:'r', name:'Finance'},
        {id:'r', name:'Service'},
        {id:'r', name:'Product'},
        {id:'r', name:'CX'},
      ],
      theAccDetItem: 0,
      accDetails: [
        {name: 'Account Master Data', children: ['Name', 'MDM ID', 'SFDC ID', 'GEO', 'Region', 'Country', 'Address']},
        {name: 'Account Reference Data', children: ['Buying Power', 'SOW']},
        {name: 'Account Contact', children: ['Name', 'Phone', 'Email']},
        {name: 'Account Trait/Segment Data', children: ['Fortune 500']},
        {name: 'Account Predictive Data', children: ['Next Time to Buy', 'Top 5 Product Resell Sugge..']},
      ],
    }
  },
  mounted() {
    this.$refs.leftDet.addEventListener('scroll', () => {
      // console.log(this.$refs.leftDet.scrollTop)
      // console.log(this.$el.querySelector('.leftDet').scrollTop)
    }, true)
  },
  methods: {
    getScrollTop() {
      // console.log(this.$refs.leftDet.scrollHeight)
      // console.log(this.$refs.leftDet.scrollTop)
      // scroll bottom
      // this.$refs.leftDet.scrollTop = this.$refs.leftDet.scrollHeight

      // setInterval 清除时 需要加 window. 属于window对象 
      let int = 0 
      int = window.setInterval(() => {
        if(this.$refs.leftDet.scrollTop > 200) {
          window.clearInterval(int)
        } else {
          this.$refs.leftDet.scrollTop += 10
          // console.log(this.$refs.leftDet.scrollTop)
        }
      }, 10)
    },
    getCusItem(i) {
      this.theCusItem = i
    },
    getAccItem(i) {
      this.theAccItem = i
    },
    getCusDetItem(v, i) {
      const leftInRef = 'leftDetIndex' + i.toString()
      this.$nextTick(() => {
        // console.log(this.$refs)
        console.log(this.$refs[leftInRef])
        // console.log(this.$refs.leftDetIndex2) // true []
        // console.log(this.$refs.leftInRef) // false undefined
      })
    },
    getAccDetItem(v, i) {

    }
  }
}
</script>
 
<style scoped lang="scss">
  .flex-row{
    display: flex;
    flex-flow: row nowrap;
  }
  .flex-column{
    display: flex;
    flex-flow: column nowrap;
  }
  .flex-h-auto{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
  }
  .center{
    justify-content: center;
    align-items: center;
  }
  .al-center{
    align-items: center;
  }
  .ju-center{
    justify-content: center;
  }
  .start{
    align-items: flex-start;
    justify-content: flex-start;
  }
  .sp-between{
    justify-content: space-between
  }
  .w-286{
    width: 286px;
  }
  // Customer + Account
  .w-317{
    width: 317px;
  }
  .w-490{
    width: 490px;
  }
  // Content
  .w-270{
    width: 270px;
  }
  // Detalis
  .w-244{
    width: 244px;
  }
  .mb-10{
    margin-bottom: 10px;
  }
  .mb-30{
    margin-bottom: 30px;
  }
  .mb-36{
    margin-bottom: 36px;
  }
  .c-lr-border{
    border-left: 1px dashed #C9C9C9;
    border-right: 1px dashed #C9C9C9;
  }
  .c-style{
    width: 206px;
    height: 40px;
    padding-left: 10px;
    box-sizing: border-box;
    border: 2px solid transparent;
    margin-bottom: 10px;
    line-height: 40px;
    background: #FFFFFF;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15);
    border-radius: 2px;
    font-size: 12px;
    font-family: Roboto-Bold;
    color: #333333;
    letter-spacing: 0;
    position: relative;
    cursor: pointer;
  }
  .d-style{
    width: 180px;
    height: auto;
    min-height: 30px;
    padding: 10px;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 2px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15);
    margin-bottom: 10px;
    position: relative;
    left: 3px;
    cursor: pointer;
    h4{
      font-family: Roboto-Bold;
      font-size: 12px;
      color: #333333;
      letter-spacing: 0;
      margin-bottom: 5px;
    }
    .det-info{
      font-family: Roboto-Regular;
      font-size: 12px;
      color: #3297FF;
      letter-spacing: 0;
      line-height: 15px;
    }
    .det-det{
      position: absolute;
      top: 0px;
      right: 5px;
      color: #999;
      font-size: 12px;
      font-weight: bolder;
      letter-spacing: 2px
    }
  }
  .border-active{
    border: 2px solid #FFA053;
    box-shadow: 0 4px 8px 0 rgba(114,158,223,0.48);
  }
  .d-style-active{
    border: 2px solid #FFA053;
    box-shadow: 0 4px 8px 0 rgba(114,158,223,0.48);
    .det-det{
      color: #333;
    }
  }
  .circle{
    background: #FFFFFF;
    border: 2px solid #FFA053;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    z-index: 6;
  }
  .three-lr-main{
    // min-width: 1296px;
    max-height: calc(100vh - 100px);
    .three-header{
      width: 100%;
      // display: none;
      // height: 32px;
      padding: 15px 70px 25px;
      .el-input{
        height: 32px;
        .el-input__inner{
          height: 32px;
        }
        .el-input__prefix{
          right: 5px;
        }
      }
      .header-note{
        height: 32px;
        line-height: 32px;
      }
    }
    .thlr-chain{
      position: relative;
      // max-height: calc(100vh - 1px);
      overflow: hidden;
      .chain-main{
        // n -> 1 1 -> n
        .cm-title{
          text-align: center;
        }
        .cm-center{
          .cmc-item{
            width: 158px;
            flex-grow: 1;
            .cmc-main{
              text-align: center;
              position: relative;
              .circle{
                top: 24px;
              }
              .left-circle{
                left: 48px;
              }
              .right-circle{
                right: 48px;
              }
              .hor-line{
                width: 65px;
                top: 28px;
              }
              .left-hor-line{
                left: -15px;
              }
              .right-hor-line{
                right: -15px;
              }
            }
          }
        }
        .the-left-hor-line{
          width: 30px;
          height: 2px;
          position: absolute;
          top: 20px;
          left: -36px;
          z-index: 5;
          background: #FFA053;
        }
        .the-right-hor-line{
          width: 30px;
          height: 2px;
          position: absolute;
          top: 20px;
          right: -36px;
          z-index: 5;
          background: #FFA053;
        }
        .hor-line{
          width: 18px;
          height: 2px;
          position: absolute;
          z-index: 5;
          background: #FFA053;
        }
        .det-ver-line{
          width: 2px;
          height: 514px;
          position: absolute;
          z-index: 5;
          background: #FFA053;
        }
        .ver-line{
          width: 2px;
          height: 52px;
          position: absolute;
          z-index: 5;
          background: #FFA053;
        }
        .c-style:last-child .ver-line{
          display: none;
        }
        // 切换局部滚动条
        .h-auto{
          width: 100%;
          // height: 500px;
          max-height: calc(100vh - 220px);
          // height: 100%;
          overflow-y: auto;
        }
        .cm-left{
          .left-circle{
            left: -7px;
            top: 16px;
          }
          .right-hor-line{
            right: -20px;
            top: 20px;
          }
          .right-ver-line{
            right: -20px;
            top: 20px;
          }
          .cm-l-det{
            position: relative;
            .right-det-ver-line{
              right: 7px;
              top: 76px;
            }
          }
        }
        .cm-right{
          .right-circle{
            right: -7px;
            top: 16px;
          }
          .left-hor-line{
            left: -20px;
            top: 20px;
          }
          .left-ver-line{
            left: -20px;
            top: 20px;
          }
          .cm-r-det{
            position: relative;
            .left-det-ver-line{
              left: 7px;
              top: 76px;
            }
          }
        }
      }
      .thlr-footer{
        position: absolute;
        bottom: 0;
        z-index: 10;
        // right: 0;
        text-align: center;
        width: 100%;
        background-image: linear-gradient(0deg, #F4F7FD 0%, rgba(244,247,253,0.00) 100%);
        .footer-note{
          height: 32px;
          line-height: 32px;
        }
      }
    }
  }
</style>